SliderDirection = Enum{
    "LeftToRight",
    "TopToBottom"
}
local gets = {}
local sets = {}
Slider = {
    props = {
        _sliderValue = 0,
        _sliderDirection = SliderDirection.LeftToRight
    },
    gets = gets,
    sets = sets,
}

function Slider:ctor()
    self:on(NodeEvent.WidthChanged, self.updateDragArea, self)
end

function gets:sliderValue(self)
    return self._sliderValue
end

function sets:sliderValue(self, key, val)
    self._sliderValue = val
    self.owner:emit(NodeEvent.SlideValueChanged, val)
    self.owner:emit(NodeEvent.SetSliderValue, val)

end

local function onDragHandleMoved(self, handle)
    self._sliderValue = self._handle.drag:getLimittedPercentX()
    self.owner:emit(NodeEvent.SlideValueChanged, self._sliderValue)
end
local function updateBar(progressBar, value)
    progressBar.progressValue = value
end

local function updateHandle(self, value)
    self.x = self.xMin + value * (self.xMax - self.xMin)
end

function Slider:setValueWithoutNotify(val)
    self._sliderValue = val
    self.progressBar.value = val
    if not self._handle then
        return
    end
    self._handle.x = self._handle.drag.xMin + self._sliderValue * (self._handle.drag.xMax - self._handle.drag.xMin)
end

function Node.Slider()
    local node = Node.new():wh(200, 20):addComponent(Slider)

    local bar = Node.ProgressBar():addTo(node)
    bar:setUrl("splash")
    bar.height = 4
    node:on(NodeEvent.SliderValueChanged, updateBar, bar)

    local handle = Node.Sprite("borderCircle20")
    handle:addComponent(Drag):wh(20, 20):addTo(node)
    handle:on(NodeEvent.OnDragMoved, onDragHandleMoved, node)
    node:on(NodeEvent.SetSliderValue, updateHandle, handle)

    handle.xMin = node:localLeft()
    handle.xMax = node:localRight()
    handle.yMin = 0
    handle.yMax = 0

    return node
end